<template>
  <div class="app-container">
    <div>
      <h3 style="text-align: left;">签约详情</h3>
    </div>

    <el-divider></el-divider>
    <el-form label-width="120px">
      <el-descriptions class="margin-top" title="居民信息" :column="4" border>

        <el-descriptions-item label="姓名">
          {{signVo.name}}
        </el-descriptions-item>

        <el-descriptions-item label="身份证号">
          {{signVo.code}}
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <span v-if="signVo.sex == '0'">女</span>
          <span v-if="signVo.sex == '1'">男</span>
        </el-descriptions-item>

        <el-descriptions-item label="年龄">
          {{signVo.age}}
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          {{signVo.phone}}
        </el-descriptions-item>

        <el-descriptions-item label="现 居 地" placeholder="请输入" span="2">
          {{signVo.addressNow}}
        </el-descriptions-item>

        <el-descriptions-item label="居民标签">
          <el-tag
            v-for="label in signVo.labelList"
            :key="label.id"
            :value="label.id"
            effect="plain">
            {{ label.name }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="家庭成员">
          {{signVo.familyName}} +{{signVo.id}}
        </el-descriptions-item>
      </el-descriptions>
    </el-form>

    <el-divider></el-divider>
    <el-form label-width="120px">
      <el-descriptions class="margin-top" title="签约信息" :column="4" border>

        <el-descriptions-item label="签约编号">
          {{signVo.id}}
        </el-descriptions-item>

        <el-descriptions-item label="签约状态">
          {{signVo.signStatus}}
        </el-descriptions-item>

        <el-descriptions-item label="签约机构">
          {{signVo.organizationName}}
        </el-descriptions-item>

        <el-descriptions-item label="签约团队">
          {{signVo.teamName}}
        </el-descriptions-item>

        <el-descriptions-item label="签约医生">
          {{signVo.doctorName}}
        </el-descriptions-item>

        <el-descriptions-item label="服务包">
          {{signVo.packageName}}
        </el-descriptions-item>

        <el-descriptions-item label="签约周期">
          {{signVo.signTime}}
        </el-descriptions-item>

        <el-descriptions-item label="费用">
          {{signVo.cost}}
        </el-descriptions-item>

        <el-descriptions-item label="签约类型">
          首次签约
        </el-descriptions-item>

        <el-descriptions-item label="申请时间">
          {{signVo.applyTime}}
        </el-descriptions-item>

        <el-descriptions-item label="生效时间" span="2">
          {{signVo.valueTime}}
        </el-descriptions-item >

        <el-descriptions-item label="签约备注">
          {{signVo.remark}}
        </el-descriptions-item>
      </el-descriptions>

      <el-form-item style="">
        <router-link :to="'/sign/edit/' + signVo.id">
          <el-button type="primary" icon="el-icon-edit">编辑签约信息</el-button>
        </router-link>
        <el-button type="success" @click="passAudit">审核通过</el-button>
        <el-button type="danger" @click="overrule">驳回</el-button>
        <el-button @click="back">返 回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import sign from "../../api/sign";

  export default {
    data() {
      return {
        signVo: {},              //表单数据的绑定模型
        saveBtnDisabled: false, //防止表单重复提交

      }
    },
    created(){
      // 获取路由地址里面的参数
      console.log(this.$route);
      if(this.$route.params && this.$route.params.id){
        // 表示: 路由参数里面有值，并且有id这个值，就是进行修改操作
        console.log("进行修改操作")
        this.queryById(this.$route.params.id);

      }

    },
    methods: {
      // 根据ID查询文章
      queryById(id){
        sign.queryById(id).then(res => {
          this.signVo = res.data;
          console.log(this.signVo);
        });
      },

      //点击添加按钮
      handleAddOrEdit(){

        // 把saveBtnDisabled 改为true  表示这按钮不可以被点击
        this.saveBtnDisabled = true;

        if(this.$route.params && this.$route.params.id){
          // 修改操作
          sign.edit(this.sign).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/sign/pendingSign' })
          });
        }else{
          // 增加操作
          //调用新增方法
          sign.add(this.sign).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/sign/pendingSign' })
          });
        }

        this.saveBtnDisabled = false;

      },
      //点击审核通过
      passAudit(){
        this.$confirm("确定要审核通过吗？","审核确认",{type:'warning'})
        .then(() => {
          //表示点击了确认
          sign.passAudit(this.signVo).then(res => {
            //弹出成功的提示信息
            this.$message.success(res.message);
            this.$router.push({ path: '/sign/pendingSign' });
          });
        })
        .catch(() => {
          // 表示点击了取消
          this.$message.info("取消操作");
        });

      },
      //点击驳回按钮
      overrule(){
        this.$prompt('驳回原因', '驳回确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern:/^[\\s\\S]*.*[^\\s][\\s\\S]*$/,
          inputErrorMessage: '驳回原因不能为空'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '驳回成功 '
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      },


      back(){
        this.$router.push({ path: '/sign/pendingSign' });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.sign.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res;
        console.log("this.sign.image = " + this.sign.image);
        this.sign.image = res.data;
      },

      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

